<template>
    <div>
      <h2>密码安全</h2>
      <el-form :model="form" label-width="120px">
        <el-form-item label="原始密码">
          <el-input v-model="form.oldPassword" type="password" />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="form.newPassword" type="password" />
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="form.confirmPassword" type="password" />
        </el-form-item>
        <el-button type="primary" @click="changePassword" style="margin-top: 20px;margin-left: 40px;">确认修改</el-button>
      </el-form>
    </div>
  </template>
  
  <script>
  import { userInfoService, updateUserService } from '@/api/user'; // 导入服务
  import Md5Util from '@/utils/Md5Util'; // 假设您有MD5工具类
  
  export default {
    data() {
      return {
        form: {
          oldPassword: '',
          newPassword: '',
          confirmPassword: '',
        },
        userInfo: null, // 用于存储用户信息
      }
    },
    created() {
      this.fetchUserInfo(); // 组件创建时获取用户信息
    },
    methods: {
      async fetchUserInfo() {
        try {
          const response = await userInfoService();
          this.userInfo = response.data; // 存储用户信息
        } catch (error) {
          this.$message.error('获取用户信息失败：' + error.message);
        }
      },
      async changePassword() {
        const { oldPassword, newPassword, confirmPassword } = this.form;
  
        // 检查新密码与确认密码是否一致
        if (newPassword !== confirmPassword) {
          this.$message.error('新密码与确认密码不匹配');
          return;
        }
  
        // 检查密码长度
        if (newPassword.length < 5 || newPassword.length > 11) {
          this.$message.error('新密码长度必须在 5 到 11 个字符之间');
          return;
        }
  
        // 检查原始密码
        const md5OldPassword = Md5Util.getMD5String(oldPassword); // MD5加密原始密码
        if (md5OldPassword !== this.userInfo.password) { // 对比数据库中的加密密码
          this.$message.error('原始密码错误');
          return;
        }
  
        // 如果一切正常，准备更新用户信息
        this.userInfo.password = Md5Util.getMD5String(newPassword); // 更新密码为新的加密密码
        console.log(this.userInfo)
        try {
          await updateUserService(this.userInfo); // 调用更新用户信息的服务
          this.$message.success('密码修改成功');
        } catch (error) {
          this.$message.error('密码修改失败：' + error.message);
        }
      }
    }
  }
  </script>
  
  <style scoped>
  </style>
  